{% extends "html/base.html" %}

{% block title %}Cenário{% endblock %}

{% block head %}
	<link type="text/css" rel="stylesheet" href="/css/card.css" />
	
	<style type="text/css">
		textarea { resize:none; }
    </style>
{% endblock %}

{% block body %}
	<div id="form_container">
		<form id="salvar_cenario_form" action="/cenario" method="post">
			<h1>Meus Projetos</h1>
			<br/>
			
			<table><tr><td>
			<div style="width:100%; height:100%;">
				<div style="width:35%; float:left;">
					<div align="center">
						<div>
							{% if persona %}
								<div class="inlineTable">
									<div class="cardborder blackborder">
										<div class="innercardborder">
											<div class="card Colourless part1">
												<span class="left_of_namebox"></span>
												<div class="pinline pinline_box namebox">
													<div class="cardtitlebar">
														<div class="cardname">
														  <span title="">{{persona.nome}}</span>
														</div>
														<div class="cardmanacost"></div>
														&nbsp;
													</div>
												</div>
												<div class="cardart_container">
													<div class="pinline pinline_sides">
														<div class="cardart image">
															<!-- Imagem da Persona -->
															{% if persona.pid %}
																<img src="img?id={{persona.pid}}&tipo=p">
															{% endif %}	
														</div>
													</div>
												</div>
												<div class="pinline pinline_box typebox">
													<div class="cardtypebar">
														<div class="cardrarity mythic">
															&nbsp;P&nbsp;
														</div>
														<div class="cardtype">
															<span>Persona</span>
														</div>
													</div>
												</div>
												<div class="cardtext_container">
													<div class="pinline pinline_sidesbottom">
														<div class="cardtext">
															<div class="rulestext_wrapper">
																<div class="rulestext">{{persona.descricao}}</div>           
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							{% endif %}
						</div>
						<div align="center">
							<a href="escolherPersona?vinc=1" style="background:none;">
								<img title="Selecionar persona" src="images/person_group_add.png" />
							</a>
						</div>
					</div>
				</div>
				<div style="width:35%; float:left;">
			  
					{% for i in range(0,6) %}
						{% if mecanicas[i] %}
						<h2>{{descricoesMecanicas[i]}}</h2>
						<div style="width:100%; height:325px;float:left; overflow:auto; overflow-y:auto;"> 
							{% for mecanica in mecanicas[i] %}
								<div class="inlineTable">
									<div class="cardborder blackborder">
										<div class="innercardborder">
											<div class="card Colourless part1">
												<span class="left_of_namebox"></span>
												<div class="pinline pinline_box namebox">
													<div class="cardtitlebar">
														<div class="cardname">
														  <span title="">{{mecanica.nome}}</span>
														</div>
														<div class="cardmanacost"></div>
														&nbsp;
													</div>
												</div>
												<div class="cardart_container">
													<div class="pinline pinline_sides">
														<div class="cardart image">
															<!-- Imagem da mecanica -->
															{% if mecanica.mid %}
																<img src="img?id={{mecanica.mid}}&tipo=m">
															{% endif %}	
														</div>
													</div>
												</div>
												<div class="pinline pinline_box typebox">
													<div class="cardtypebar">
														<div class="cardrarity mythic">
															&nbsp;P&nbsp;
														</div>
														<div class="cardtype">
															<span>Mecânica</span>
														</div>
													</div>
												</div>
												<div class="cardtext_container">
													<div class="pinline pinline_sidesbottom">
														<div class="cardtext">
															<div class="rulestext_wrapper">
																<div class="rulestext">{{mecanica.descricao}}</div>           
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							{% endfor %}
							
						</div>
						{% endif %}
					{% endfor %}

				</div>
				<div style="width:30%; float:right;">
					<p>
						<textarea name="txtAreaIdeias" rows="17" cols="28">{{ideias}}</textarea>
					</p>
					<br/>
					
					<h2>
						Similares 
						{% if persona %}
							<a href="/similares?vinc=1&pid={{persona.pid}}" style="background:none;">
								<img title="Adicionar similar" src="images/add-icon.png" />
							</a>
						{% endif %}
					</h2>
					{% if jogos != none %}
						<div style="width:100%; height:325px;float:left; overflow:auto; overflow-y:auto;">  
							{% for jogo in jogos %}
								<div class="inlineTable">
									<div class="cardborder blackborder">
										<div class="innercardborder">
											<div class="card Colourless part1">
												<span class="left_of_namebox"></span>
												<div class="pinline pinline_box namebox">
													<div class="cardtitlebar">
														<div class="cardname">
														  <span title="">{{jogo.nome}}</span>
														</div>
														<div class="cardmanacost"></div>
														&nbsp;
													</div>
												</div>
												<div class="cardart_container">
													<div class="pinline pinline_sides">
														<div class="cardart image">
															<!-- Imagem da jogo -->
															{% if jogo %}
																<img src="img?id={{jogo.mid}}&tipo=m">
															{% endif %}	
														</div>
													</div>
												</div>
												<div class="pinline pinline_box typebox">
													<div class="cardtypebar">
														<div class="cardrarity mythic">
															&nbsp;P&nbsp;
														</div>
														<div class="cardtype">
															<span>Jogo</span>
														</div>
													</div>
												</div>
												<div class="cardtext_container">
													<div class="pinline pinline_sidesbottom">
														<div class="cardtext">
															<div class="rulestext_wrapper">
																<div class="rulestext">{{jogo.descricao}}</div>           
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					{% else %}
						<font size="2px">Sem cartas de similares selecionadas...</font>
						<br /><br />
					{% endif %}
					
					<h2>
						Cinética
						<a href="/escolherMecanica?cinetica=1" style="background:none;">
							<img title="Adicionar cinética" src="images/add-icon.png" />
						</a>
					</h2>
					{% if cineticas != none %}
						<div style="width:100%; height:325px;float:left; overflow:auto; overflow-y:auto;">  
							{% for cinetica in cineticas %}
								<div class="inlineTable">
									<div class="cardborder blackborder">
										<div class="innercardborder">
											<div class="card Colourless part1">
												<span class="left_of_namebox"></span>
												<div class="pinline pinline_box namebox">
													<div class="cardtitlebar">
														<div class="cardname">
														  <span title="">{{cinetica.tipo}} - {{cinetica.nome}}</span>
														</div>
														<div class="cardmanacost"></div>
														&nbsp;
													</div>
												</div>
												<div class="cardart_container">
													<div class="pinline pinline_sides">
														<div class="cardart image">
															<!-- Imagem da cinetica -->
															{% if cinetica %}
																<img src="img?id={{cinetica.mid}}&tipo=m">
															{% endif %}	
														</div>
													</div>
												</div>
												<div class="pinline pinline_box typebox">
													<div class="cardtypebar">
														<div class="cardrarity mythic">
															&nbsp;P&nbsp;
														</div>
														<div class="cardtype">
															<span>Cinética</span>
														</div>
													</div>
												</div>
												<div class="cardtext_container">
													<div class="pinline pinline_sidesbottom">
														<div class="cardtext">
															<div class="rulestext_wrapper">
																<div class="rulestext">{{cinetica.descricao}}</div>           
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					{% else %}
						<font size="2px">Sem cartas de cinética selecionadas...</font>
						<br /><br />
					{% endif %}
					
					<input id="salvar_cenario_form_submit" class="defaultButton" name="SalvarCenario" type="submit" value="Salvar cenário">
					{% if idCenario %}
						<input name="idCenario" type="hidden" value="{{idCenario}}" />
					{% endif %}
				</div>
			</div>
			</td></tr></table>
		</form>
	</div>
{% endblock %}
